<template>
  <div>
    <inputt></inputt>
	<list></list>
	
	<input type="text" v-model="value" @keydown.enter="add">
	<ul>
		<li v-for="(item,index) in info" :key="index">
			<span @dblclick="updatee(item,index)" v-show="updateIndex != index">{{item.title}}</span>
		<button @click="del(index)">删除</button>
		<input type="text" v-show="updateIndex == index"
			v-model="item.title"
			@keydown.enter="updateSave"
			@keydown.esc="back(item)"
		>
		</li>
	</ul>
  </div>
</template>

<script>
	import inputt from '@/components/Input.vue'
	import list from '@/components/list.vue'
	export default {
		components:{
			inputt,list
		},
		data(){
			return {
				value : '',
				info : [],
				updateIndex : -1,
				temValue : ''
			}
		},
		methods:{
			add(){
				this.info.push({
					title : this.value
				});
				this.value = ''
			},
			del(index){
				this.info.splice(index,1)
			},
			updatee(item,index){
				this.updateIndex = index;
				this.temValue = item.title
			},
			updateSave(){
				this.updateIndex = -1
			},
			back(item){
				item.title = this.temValue
				this.updateIndex = -1
			}
		}
	}
</script>

<style scoped>
	ul
	{
		list-style: none;
	}
</style>